<template>
	<view class="orderCenter">
		<u-navbar :background="navObj" :is-back="false" :is-fixed="true" height="89" width="100%"
			style="position: absolute;">
			<view class="title">我的评价</view>

			<view class="left-box" @tap="onClickLeft">
				<u-icon name="arrow-left" size="40" color="#000"></u-icon>
			</view>
		</u-navbar>

		<view style="padding-top: 245rpx;">
			<view class="pinglunItem" v-for="item in data">
				<view class="line1">
					<image :src="item.userImage" style="width: 57rpx;height: 57rpx;border-radius: 57rpx;"></image>
					<view class="line1_name">
						{{item.userName}}
					</view>
				</view>

				<view class="line2">
					{{item.createTime}}
				</view>
				<view class="line3">
					{{item.content}}
				</view>
				
				<view class="line4" v-if="item.imageList.split(',')[0]">
					<view class="line4_item" v-for="i in item.imageList.split(',')">
						<image :src="i" mode="" style="width: 100%; height: 100%;"></image>
					</view>
				</view>
				
				<view class="line5">
					<image :src="item.productImage" mode="" style="width: 122rpx; height: 122rpx;"></image>
					<view class="proname">
						{{item.productName}}
					</view>
					
					<view class="price_line6">
						￥{{item.price}}
					</view>
					
					<view class="shuliang">
						x {{item.num}}
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		myComment
	} from '@/api/order.js'
	import storage from '@/utils/storage.js';
	export default {
		data() {
			return {
				page: 1,
				limit: 10,
				data: [],
				navObj: {
					backgroundColor: 'rgb(255, 255, 255)',
				},
			};
		},

		onLoad() {
			this.initData()
		},

		onReachBottom() {
			this.page = this.page + 1
			this.initData()
		},

		methods: {
			onClickLeft() {
				// uni.navigateBack();
				uni.switchTab({
					url: "/pages/tabbar/user/my"
				})
			},
			initData() {
				myComment({
					id: storage.getUserInfo().id,
					page: this.page,
					limit: this.limit,

				}).then(res => {
					console.log(res)
					this.data = [...this.data, ...res.data.list]
					console.log(this.data)
				})
			},


		},
	};
</script>

<style scoped>
	.orderCenter {
		width: 100%;
		min-height: 100vh;
	}

	.title {
		position: absolute;
		top: 80rpx;
		left: 50%;
		transform: translateX(-50%);
		font-family: PingFang;
		font-weight: bold;
		font-size: 33rpx;
		color: #000;

	}

	.left-box {
		padding-left: 41rpx;
	}

	.pinglunItem {
		width: 100%;
		padding: 36rpx 21rpx;
	}

	.line1 {
		width: 100%;
		height: 57rpx;
		line-height: 57rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.line1_name {

		font-family: PingFang;
		font-weight: 500;
		font-size: 29rpx;
		color: #000000;
		padding-left: 20rpx;
	}

	.line2 {
		width: 100%;
		padding-left: 77rpx;
		font-family: PingFang;
		font-weight: 500;
		font-size: 25rpx;
		color: #B4B5BE;

	}

	.line3 {
		width: 100%;
		padding-left: 77rpx;
		font-family: PingFang;
		font-weight: 500;
		font-size: 27rpx;
		color: #323E46;
		line-height: 42rpx;
		word-wrap: break-word;
	}

	.line4 {
		width: 100%;
		padding-left: 77rpx;
	}

	.line4_item {
		width: 203rpx;
		height: 203rpx;
		display: inline-block;
		margin-left: 10rpx;

	}

	.line5 {
		width: 628rpx;
		height: 166rpx;
		background: rgb(241, 244, 249);
		position: relative;
		left: 36px;
		margin-top: 20rpx;
		padding: 22rpx 20rpx;
		
		
	}
	
	.proname {
		position: absolute;
		left: 154rpx;
		top: 21rpx;
		
		
		font-family: Adobe Heiti Std;
		font-weight: normal;
		font-size: 25rpx;
		color: #151F38;
		
	}
	
	.price_line6 {
		position: absolute;
		top: 112rpx;
		left: 154rpx;
		
	
		font-family: Adobe Heiti Std;
		font-weight: normal;
		font-size: 23rpx;
		color: #FF3A3A;
		
	}
	
	.shuliang {
		position: absolute;
	
		font-family: Adobe Heiti Std;
		font-weight: normal;
		font-size: 25rpx;
		color: #A4A5B3;
		top: 114rpx;
		right: 21rpx;
	}
</style>
